import React from 'react';
import {LazyLog, ScrollFollow} from 'react-lazylog';
import {serverUrl} from "../../../config";
import {Col, Row, Switch,DatePicker} from "antd";

let api = '/api/container/';


export default class ContainerLog extends React.Component {


  state = {
    baseUrl: serverUrl + api + "log/" + this.props.hostId + "/" + this.props.containerId,
    follow: true,
    //缓存baseurl
    url:  serverUrl + api + "log/" + this.props.hostId + "/" + this.props.containerId,
    stream: false,
    //禁用选择的时间 就是从创建时间
    disableSince:  this.props.disableSince,

    //查询相关的
    since:null,
  }

  /**
   * 构建查询条件
   * @param since 秒级时间戳 指定开始时间
   */
  buildOption = (since) =>{
    this.setState({since:since})
    let baseUrl = this.state.url + "?"
    if (since) {
      baseUrl = baseUrl + "since=" + since
    }
    this.setState({baseUrl:baseUrl})
  }

  render() {
    const {hostId, containerId} = this.props;

    return (
      <>
        <div style={{height: 500, width: '100%'}}>
          <ScrollFollow
            startFollowing={this.state.follow}
            render={({follow, onScroll}) => {
              return (
                <LazyLog url={this.state.baseUrl}
                         selectableLines={true}
                         enableSearch={true}
                         stream
                         follow={follow}
                         onScroll={onScroll}/>
              );
            }}
          />
        </div>
        <div style={{height: 50, width: '100%'}}>
          <Row>
            <Col>
              跟随滚动:<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={this.state.follow} onChange={(value)=>{
                this.setState({follow:value})
            }}/>
            </Col>
          </Row>
          {/*<Row>*/}
          {/*  <Col>*/}
          {/*    选择开始时间:<DatePicker showTime allowClear onChange={(value)=>{*/}
          {/*      let number = Number(value.format("X"));*/}
          {/*      this.buildOption(number)*/}
          {/*  }}/>*/}
          {/*  </Col>*/}
          {/*</Row>*/}
        </div>
      </>
    )
  }


}



